<template>
    <div class="app">
        <div class="site-head_box">
            <div class="no-img_box" v-if="$util.isEmpty(form.cover)">
                <div class="no-img_btn" @click="changeImg">
                    <i class="iconfont iconpaizhao"></i>
                </div>
                <div class="dec">工地分享封面</div>
            </div>
            <div v-else class="head-img_img">
                <img class="head_img" :src="form.cover" alt="分享封面">
                <div class="head-img_open">
                    <div class="head-open_bg" @click="changeImg">
                        <i class="iconfont iconpaizhao"></i>
                    </div>
                   <div class="head-open_bg" @click="deleteImg">
                       <i class="iconfont icondelete"></i>
                   </div>
                </div>
            </div>
        </div>
        <div class="site-form_box">
            <div class="site-form-item">
                <appInputAll v-model="form.name" title="项目名称" placeholder="请输入标题"/>
                <appInputAll v-model="current_stage_name" arrowsRight disabled @click.native="selectStatus" title="当前阶段" placeholder="请选择"/>
                <appInputAll v-model="form.item_no" title="项目编号" placeholder="请输入编号"/>
            </div>
            <div class="site-form-item">
                <appCell @click.native="selectAddress" title="地址" >
					<div
						slot="value"
						class="address-box">
						<template v-if="!$util.isEmpty(form.short_address)&&!$util.isEmpty(form.full_address)">
							<div>{{form.short_address}}</div>
							<div>{{form.full_address}}</div>
						</template>
						<template v-else>
							<div class="dec">请选择地址</div>
						</template>
					</div>
				</appCell>
                <appInputAll v-model="form.house_no" title="门牌" placeholder="请输入门牌"/>
                <appInputAll v-model="house_style_standard" arrowsRight disabled @click.native="$refs.selectHouse.show()" title="户型类型" placeholder="请选择户型类型"/>
                <appInputAll v-if="form.house_style_standard==1" v-model="form.house_style_other" title="其他户型" placeholder="请输入其他户型"/>
				<appInputAll v-if="form.house_style_standard==0" v-model="huxing" arrowsRight disabled @click.native="$refs.multiSelector.show()" title="户型" placeholder="请选择户型"/>
                <appInputAll v-model="form.building_area" title="建筑面积(m²)" placeholder="请输入面积"/>
            </div>
            <div class="site-form-item">
                <appInputAll v-model="decorate_style_name" arrowsRight disabled @click.native="$refs.fitmentStyle.show()" title="装修风格" placeholder="请选择"/>
                <appInputAll v-model="decorate_way_name" arrowsRight disabled @click.native="$refs.way.show()" title="装修方式" placeholder="请选择"/>
                <appInputAll v-model="form.budget" title="预算(万元)" placeholder="请输入预算"/>
            </div>
        </div>
        <div class="app-footer" @click="save">
            保存
        </div>
        <wPicker
            v-if="!$util.isEmpty(fitmentStyle)"
			@confirm="onFitmentStyleConfirm"
			:selectList="fitmentStyle"
			mode="selector"
			ref="fitmentStyle" />
        <wPicker
            v-if="!$util.isEmpty(fitmentWay)"
			@confirm="onFitmentWayConfirm"
			:selectList="fitmentWay"
			mode="selector"
			ref="way" />
        <wPicker
			@confirm="onHuxingTypeConfirm"
			:selectList="columnsType"
			mode="selector"
			ref="selectHouse" />
        <wPicker
			:multiSelectorList="columns"
			@confirm="onHuxingType"
			mode="multiSelector"
			ref="multiSelector" />
        <div v-show="false">
            <appUploader
                @chooseImage="chooseUploader"
                :multiple="false"
                ref="appUploader"
                :imgList.sync ="imgList" />
        </div>
		<EditAlert
			setUrl
			leftTitle="返回详情"
			:routeUrl="`/pages/constructionSite/detail${commonJS.queryData({
					owner_user_id: this.query.owner_user_id,
					id: detailData.site_id
				})}`"
			ref="editAlert" />
    </div>

</template>

<script>
import appInputAll from '@/components/app_input_all'
import appCell from '@/components/app_cell'
import wPicker from '@/components/w-picker/components/w-picker'
import appUploader from '../../components/App_uploader'
import { getFitmentDetail, getFitmentWay, getFitmentStyle, modifySiteCover, modifySite } from '@/api/constructionSite/index'
import EditAlert from '@/pages/components/editAlert'
export default {
	name: 'SiteInfoEdit',
	components: {
		appInputAll,
		appCell,
		wPicker,
		appUploader,
		EditAlert
	},
	data() {
		return {
			house_style_standard: '',
			huxing: '',
			current_stage_name: '',
			decorate_style_name: '',
			decorate_way_name: '',
			form: {
				site_info_id: '',
				cover: '',
				name: '',
				item_no: '',
				current_stage_id: '',
				house_no: '',
				house_style_room: '', // 房
				house_style_hall: '', // 厅
				house_style_kitchen: '', // 厨
				house_style_bathroom: '', // 卫
				house_style_veranda: '', // 阳
				budget: '',
				decorate_style: '',
				decorate_way: '',
				building_area: '',
				map_longitude: '',
				map_latitude: '',
				short_address: '',
				full_address: '',
				house_style_standard: '',
				house_style_other: ''
			},
			imgList: [],
			columnsType: [{ value: 0, label: '标准户型' }, { value: 1, label: '其他户型' }],
			columns: [
				this.formtHuxing('房', 'house_style_room'),
				this.formtHuxing('厅', 'house_style_hall'),
				this.formtHuxing('卫', 'house_style_bathroom'),
				this.formtHuxing('阳台', 'house_yang'),
				this.formtHuxing('厨', 'house_style_kitchen')
			],
			query: {},
			fitmentWay: [],
			fitmentStyle: [],
			detailData: {}
		}
	},
	onLoad(val) {
		this.query = val
	},
	mounted() {
		this.init()
		this.getOptionList()
	},
	methods: {
		editStage() {
			if (!this.$util.isEmpty(this.query.stage_id) &&
		!this.$util.isEmpty(this.query.stage_txt)) {
				this.current_stage_name = this.query.stage_txt
				this.form.current_stage_id = this.query.stage_id
				this.editInfo()
			}
		},
		sourceAddressEdit() {
			if (!this.$util.isEmpty(this.query.addressInfo)) {
				let address = JSON.parse(this.query.addressInfo)
				this.form.short_address = address.title
				this.form.full_address = address.address
				this.form.map_latitude = address.location.lat
				this.form.map_longitude = address.location.lng
				this.editInfo()
			}
		},
		setSiteCover() {
			modifySiteCover({
				site_info_id: this.detailData.site_info_id,
				cover: encodeURIComponent(this.imgList[0])
			})
				.then(res => {
					this.form.cover = this.imgList[0]
					this.imgList.splice(0, 1)
					uni.showToast({
						title: '更换成功',
						icon: 'none'
					})
				})
		},
		getOptionList() {
			Promise.all([
				getFitmentWay(),
				getFitmentStyle()
			])
				.then(res => {
					this.fitmentWay = res[0].data.list.map(i => ({
						value: i.cat_id,
						label: i.cat_name
					}))
					this.fitmentStyle = res[1].data.list.map(i => ({
						value: i.cat_id,
						label: i.cat_name
					}))
				})
				.catch(() => {})
		},
		init() {
		  return getFitmentDetail({
				id: this.query.id
			}).then(res => {
				if (res.status === 'success') {
					Object.keys(this.form).forEach(i => {
						this.form[i] = res.data.site_info[i]
					})
					this.detailData = res.data.site_info
					this.current_stage_name = this.detailData.current_stage_name
					this.decorate_style_name = this.detailData.decorate_style_name
					this.decorate_way_name = this.detailData.decorate_way_name
					this.house_style_standard = this.detailData.house_style_standard == 0 ? '标准户型' : '其它户型'
					this.huxing = this.detailData.house_structure
					this.sourceAddressEdit()
					this.editStage()
				}
			})
		},
		formtHuxing(text, type, total = 10) {
			const arr = []
			for (let i = -1; i < total; i += 1) {
				const obj = {
					label: `${i + 1}${text}`,
					type,
					value: i + 1
				}
				arr.push(obj)
			}
			return arr
		},
		onHuxingTypeConfirm(val, index) {
			this.house_style_standard = val.result
			this.form.house_style_standard = val.checkArr.value
		},
		onHuxingType(val) {
			this.huxing = val.result.join('')
			val.checkArr.forEach(i => {
				this.form[i.type] = i.value
			})
		},
		onFitmentWayConfirm(val) {
			this.decorate_way_name = val.result
			this.form.decorate_way = val.checkArr.value
		},
		onFitmentStyleConfirm(val) {
			this.decorate_style_name = val.result
			this.form.decorate_style = val.checkArr.value
		},
		save() {
			this.editInfo()
		},
		editInfo() {
			modifySite(this.form)
				.then(res => {
					// uni.showToast({
					// 	title: '修改成功',
					// 	icon: 'none'
					// })
					this.$refs.editAlert.editalert = true
				})
		},
		selectStatus() {
			const params = {
				...this.query,
				url: '/pages/constructionSite/infoEdit',
				current_stage_group_id: this.detailData.current_stage_group_id,
				stage_id: this.detailData.current_stage_id,
				site_info_id: this.detailData.site_info_id
			}
			uni.navigateTo({
				url: `/pages/constructionSite/selStage${this.commonJS.queryData(params)}`
			})
		},
		selectAddress() {
			let query = {
				url: '/pages/constructionSite/infoEdit',
				...this.query
			}
			uni.navigateTo({
				url: `/pages/location/index${this.commonJS.queryData(query)}`
			})
		},
		chooseUploader() {
			this.setSiteCover()
		},
		changeImg() {
			this.$refs.appUploader.chooseImage()
		},
		deleteImg() {
			this.form.cover = ''
		}
	}
}
</script>

<style lang="scss" scoped>
     .app {
         background-color: #f5f5f5;
         min-height: 100%;
         padding-bottom: 200px;
     }
     .site-head_box {
        width: 100%;
        height: 480px;
        background-color: #F5F5F5;
        & .no-img_box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            & .no-img_btn {
                width:200px;
                height:200px;
                background:rgba(153,153,153,1);
                border-radius:50%;
                position: relative;
                & .iconpaizhao {
                    color: #FFFFFF;
                    position: absolute;
                    font-size: 90px;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            & .dec {
                font-size:28px;
                font-weight:400;
                color:rgba(153,153,153,1);
                margin-top: 30px;
            }
        }
        & .head-img_img {
            width: 100%;
            height: 100%;
            position: relative;
            & .head_img {
                width: 100%;
                height: 100%;
            }
            & .head-img_open {
               position: absolute;
               right: 0;
               bottom: 0;
               z-index: 100;
               display: flex;
              .head-open_bg {
                  height: 100px;
                  width: 100px;
                  background-color: rgba(0,0,0,.5);
                  position: relative;
                  z-index: 10;
                  border-radius: 50%;
                  margin: 10px;
                  & .iconfont {
                      color: #FFFFFF;
                      font-size: 45px;
                      position: absolute;
                    //   font-size: 90px;
                      left: 50%;
                      top: 50%;
                      transform: translate(-50%, -50%);
                  }
              }
            }
        }
    }
    .site-form_box{
        & .site-form-item {
            padding-left: 30px;
            background-color: #FFFFFF;
            &:not(:first-child){
                margin-top: 20px;
            }
        }
	}
	.address-box {
		width: 100%;
		min-height: 88px;
		font-size: 28px;
		color:#4d4d4d;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10px 0 ;
		& > div {
			margin: 10px 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			max-width: 500px;
		}
		&  .dec{
			color: #767676;
		}
	}

</style>
